<template>
    <!-- 用户操作日志 -->
    <entity-manager
        :fields="fields"
        :queryFields="queryFields"
        apiPrefix="/base/user-log"
        :tree="false"
        ref="entityManagerRef"
        :params="params"
        operationsWidth="100px"
        :withNew="false"
        :withEdit="false"
        :withDelete="false"
    >
        <template #appendButtons="{ row }">
            <el-link type="primary" @click="showDetail(row)">详情</el-link>
        </template>
    </entity-manager>

    <el-drawer v-model="visible" size="600px" title="日志详情" close-on-click-modal>
        <base-form v-model="currentRow" :fields="formFields" readonly />
        <template #footer>
            <el-button @click="visible = false">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from "vue";

const fields = [
    { label: "用户id", prop: "userId", max: 64, width: "100px" },
    { label: "用户名", prop: "username", width: "120px" },
    { label: "模块", prop: "module", width: "120px" },
    { label: "操作类型", prop: "type", max: 64, width: "120px" },
    { label: "请求路径", prop: "path" },
    { label: "请求方法", prop: "method", width: "100px" },
    { label: "IP", prop: "ip", width: "120px" },
    { label: "是否成功", prop: "success", width: "80px", converter: (val) => (val ? "成功" : "失败") },
    { label: "耗时", prop: "spentTime", width: "80px", converter: (val) => val + "ms" },
    { label: "操作时间", prop: "createTime", width: "160px", system: true },
];
const formFields = [
    { label: "用户id", prop: "userId" },
    { label: "用户名", prop: "username" },
    { label: "模块", prop: "module" },
    { label: "操作类型", prop: "type" },
    { label: "请求路径", prop: "path" },
    { label: "请求方法", prop: "method" },
    { label: "参数", prop: "params", inputType: "textarea" },
    { label: "IP", prop: "ip" },
    { label: "是否成功", prop: "success", type: "checkbox" },
    { label: "耗时", prop: "spentTime", append: "ms" },
    { label: "结果", prop: "result", inputType: "textarea" },
    { label: "操作时间", prop: "createTime" },
];
const queryFields = [];
const entityManagerRef = ref();
const params = ref({});
const currentRow = ref({});
const visible = ref(false);

function reload() {
    entityManagerRef.value.reload();
}

function showDetail(row) {
    app.https.get("/base/user-log/detail/" + row.id).then((resp) => {
        currentRow.value = resp;
        visible.value = true;
    });
}
</script>
